<template>
	<div class="addshop">
		<div class="addshop_top">
			<el-steps :active="active" finish-status="success">
				<el-step title="1.商品信息"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>
		</div>
		<component :is="changeName" ref="activeComponent"></component>
		<div class="addshop_bottom">
			<el-button
				style="margin-top: 12px;"
				@click="prevFn()"
				v-if="active > 1"
				type="primary"
				>上一步</el-button
			>
			<el-button style="margin-top: 12px;" @click="next()" type="primary"
				>下一步</el-button
			>
			<el-button style="margin-top: 12px;" @click="submite" type="primary"
				>提交</el-button
			>
		</div>
	</div>
</template>
<script>
import Theforms from "./Theforms.vue";
import Thetwo from "./Thetwo.vue";
import Thethree from "./Thethree.vue";
export default {
	data() {
		return {
			active: 1,
			changeName: "Theforms",
			obj: {},
		};
	},
	components: {
		Theforms,
		Thetwo,
		Thethree,
	},
	methods: {
		prevFn() {
			switch (this.active) {
				case 3:
					this.active = 2;
					this.changeName = "Thetwo";
					break;
				case 2:
					this.active = 1;
					this.changeName = "Theforms";
					break;
			}
		},
		next() {
			switch (this.active) {
				case 0:
					this.active += 1;
					this.changeName = "Theforms";
					break;
				case 1:
					this.active += 1;
					this.changeName = "Thetwo";
					break;
				case 2:
					this.active += 1;
					this.changeName = "Thethree";
					break;
			}
		},
		submite() {
			console.log(this.obj);
			this.$router.push("/kill/index2/barteringGoods");
		},
	},
};
</script>
<style lang="scss" scoped>
.addshop {
	width: 100%;
	height: 100%;
	.addshop_top {
	}
	.addshop_bottom {
		margin-top: 50px;
	}
}
</style>
